<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //页面中的所有内容都加载完毕最后执行
        // window.onload=function(){
        //     console.log(document.getElementById("one"));
        // }

        //多个的时候，后面会将前面的覆盖，没有简写
        // window.onload=function(){
        //     console.log("1111");
        // }
    </script>
</head>
<body>
    <h1 id="one">1111</h1>
    <div>
        <h1>222</h1>
    </div>
    <script src="jquery.min.js"></script>
    <script>
        // $("h1").on("click",function(){
        //     console.log("111");
        // })

        // $("h1").click(function(){
        //     console.log("111");
        // })


        // $("div h1").click(function(){
        //     console.log("111");
        // })

        //第二个参数，指的是范围
        $("h1","div").click(function(){
            console.log("111");
        })


        //DOM 加载完成
        // $(document).ready(function(){
        //     console.log($("h1"))
        // })
        
        // //有简写：
        //  $().ready(function(){
        //     console.log($("h1"))
        // })

        //后面不会覆盖前面的，不会相互影响
        //  $(function(){
        //     console.log($("h1"))
        //  })
    </script>
</body>
</html>